import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { connect } from 'react-redux'

import ListCompoent from '../../../components/List/index.jsx'
import LoadMore from '../../../components/LoadMore/index.jsx'

import { getSearchData } from '../../../fetch/search/search.js'

// 初始化一个组件的 state
const initialState = {
    ListData: [],//存储请求的列表数据
    hasMore: false,//当前状态下是否还有更多
    isLoadingMore: false,//当前状态下是“加载中..”还是点击加载更多
    page: 1//
}
class SearchList extends React.Component {
    constructor(props, context) {
        super(props, context);
         this.state = initialState
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
       	this.loadMoreData  = this.loadMoreData.bind(this)
    }
    render() {
    	let {loadMoreData} = this;
        let {isLoadingMore,page,hasMore} = this.state
        return (
            <div>
                {
                    this.state.ListData.length ? 
                    <ListCompoent 
                        {...{
                            ListData:this.state.ListData
                        }}
                    /> : <div>不好意思暂时没有数据</div>
                }
                {
                   this.state.hasMore ? 
                        <LoadMore
                            {...{
                                loadMoreFn:loadMoreData,
                                isLoadingMore:isLoadingMore,
                                page:page,
                                hasMore:hasMore
                            }}
                        /> 
                    :<div>没有更多</div>
                }
            </div>
        )
    }
    componentDidMount() {
        // 获取首页数据
        this.loadFirstPageData()
    }
    // 获取首页数据
    loadFirstPageData() {
        const cityName = this.props.userinfo.cityName
        const keyword = this.props.keyword || ''
        const category = this.props.category;
        //请求数据
        const result = getSearchData(0, cityName, category, keyword)
        this.resultHandle(result)
    }
    // 处理数据
    resultHandle(result) {
        result.then(res => {
            return res.json()
        }).then(json => {
            const hasMore = json.hasMore
            const ListData = json.data
            this.setState({
                hasMore: hasMore,
                // 注意，这里讲最新获取的数据，拼接到原数据之后，使用 concat 函数
                ListData: this.state.ListData.concat(ListData)
            })
            //console.log(this.state)
        }).catch(ex => {
            if (__DEV__) {
                console.error('搜索页获取数据报错, ', ex.message)
            }
        })
    }
    // 加载更多数据
    loadMoreData() {
        // 记录状态
        this.setState({
            isLoadingMore: true
        })
        const cityName = this.props.userinfo.cityName
        const page = this.state.page
        const keyword = this.props.keyword || ''
        const category = this.props.category;
        //请求搜索数据
        const result = getSearchData(page, cityName, category, keyword)
        this.resultHandle(result)
        // 更新状态
        this.setState({
            page: page + 1,
            isLoadingMore:false
        })
    }
    // 处理重新搜索
    componentDidUpdate(prevProps, prevState) {
        const keyword = this.props.keyword
        const category = this.props.category

        // 搜索条件完全相等时，忽略。重要！！！
        if (keyword === prevProps.keyword && category === prevProps.category) {
            return
        }

        // 重置 state
        this.setState(initialState)

        // 重新加载数据
        this.loadFirstPageData()
    }
}

// -------------------redux react 绑定--------------------
function mapStateToProps(state) {
    return {
        userinfo: state.userinfo
    }
}

function mapDispatchToProps(dispatch) {
    return {
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchList)